<template>
    <div class="sign_item_content">
        <div class="item_area" v-for="(item, index) in signItems" :key="index" :index="index"
             :class="{'last_item': item.isLast}" :style="item.style">
            <template v-if="item.items && item.items.length > 0">
                <div class="col_component" :class="`col_${colItem._index}`" v-for="(colItem, colIndex) in item.items" :key="colIndex">
                    <div class="item_component" v-for="(child, cIndex) in colItem.components"
                         :key="cIndex" :dataId="child.index" :class="child.class" :style="child.style">
                        <template v-if="child.input_edit===1">
                            <el-input v-model="child[child.type]" :type="child.type==='default_text'?'textarea':'text'"
                                      :rows="child.maxRow"></el-input>
                        </template>
                        <template v-else>
                            <span>{{child.label || ' '}}</span>
                            <template v-if="child.input">
                                <el-date-picker v-model="item.date" type="date" placeholder="选择日期" style="width: 160px;"
                                                format="yyyy年MM月dd日" value-format="yyyy-MM-dd" :editable="false"
                                                v-if="edit && child.date">
                                </el-date-picker>
                                <div class="input_area" v-else>
                                    <span v-if="child.date">{{item.date || ' '}}</span>
                                </div>
                            </template>
                            <template v-else>
                                <div class="block_area"></div>
                            </template>
                        </template>
                    </div>
                    <div class="draw_image sign_draw_image" v-if="colItem.isSign" :style="colItem.signStyle" v-drag="colItem.signDrag"/>
                    <div class="draw_image seal_draw_image" v-if="colItem.isSeal" :style="colItem.sealStyle" v-drag="colItem.sealDrag"/>
                    <div class="btn_area" v-if="edit">
                        <el-link :underline="false" @click="handleClickAddSign(colItem, item)" v-if="filterBtn(colItem, 'sign_label')">点击签名</el-link>
                        <el-link :underline="false" @click="handleClickAddSeal(colItem, item)" v-if="filterBtn(colItem, 'seal_label')">点击签章</el-link>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="item_component" v-for="(child, cIndex) in item.components"
                     :key="cIndex" :dataId="child.index" :class="child.class" :style="child.style">
                    <template v-if="child.input_edit===1">
                        <el-input v-model="item[child.type]" :type="child.type==='default_text'?'textarea':'text'"
                                  :rows="child.maxRow" style="width: 100%;"></el-input>
                    </template>
                    <template v-else>
                        <span>{{child.label || ' '}}</span>
                        <template v-if="child.input">
                            <el-date-picker v-model="item.date" type="date" placeholder="选择日期" style="width: 160px;"
                                            format="yyyy年MM月dd日" value-format="yyyy-MM-dd" :editable="false"
                                            v-if="edit && child.date">
                            </el-date-picker>
                            <div class="input_area" v-else>
                                <span v-if="child.date">{{item.date || ' '}}</span>
                            </div>
                        </template>
                        <template v-else>
                            <div class="block_area"></div>
                        </template>
                    </template>
                </div>
                <div class="draw_image sign_draw_image" v-if="item.isSign" :style="item.signStyle" v-drag="item.signDrag"/>
                <div class="draw_image seal_draw_image" v-if="item.isSeal" :style="item.sealStyle" v-drag="item.sealDrag"/>
                <div class="btn_area" v-if="edit">
                    <el-link :underline="false" @click="handleClickAddSign(item)" v-if="filterBtn(item, 'sign_label')">点击签名</el-link>
                    <el-link :underline="false" @click="handleClickAddSeal(item)" v-if="filterBtn(item, 'seal_label')">点击签章</el-link>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    import fileApi from "@common/api/fileApi";
    import {mapState} from "vuex";

    export default {
        name: "SignItemForm",
        props: {
            items: {
                type: Array,
                default () {
                    return [];
                },
            },
            edit: {
                type: Boolean,
                default: false,
            },
            work: {
                type: Boolean,
                default: false,
            },
        },
        data () {
            return {
                fileApiUrl: fileApi.url,
                signItems: [],
                topList: [10, 35],
                bottomList: [30, 60, 90],
                imageObj: {
                    width: 150,
                    height: 150,
                },
                zIndex: 1,
            };
        },
        computed: {
            ...mapState(['accessToken', 'userInfo']),
        },
        watch: {
            items: {
                handler () {
                    this.init();
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            filterBtn(item, field) {
                let filters = item.components.filter(t => t.type === field);
                return filters && filters.length > 0;
            },
            accRate (value1, value2) {
                let _this = this;
                let rate = _this.$utils.accMul(value1, 100);
                rate = _this.$utils.accDiv(rate, value2);
                if (String(rate).indexOf('.') !== - 1) {
                    rate = rate.toFixed(2);
                }
                return rate;
            },
            init () {
                if (this.work) {
                    this.initWorkItem();
                } else {
                    this.initItems();
                }
            },
            initWorkItem () {
                let _this = this;
                let list = [];
                let totalHeight = 0;
                let itemWidth = $('.sign_item_content').width();
                let itemHeight = $('.sign_item_content').height();
                let itemList = [];
                _this.items.forEach(item => {
                    itemList.push($.extend({}, item));
                });
                itemList.forEach(item => {
                    if (_this.$utils.isNotEmpty(item.sign_position)) {
                        item.signPosition = JSON.parse(item.sign_position);
                    }
                    if (_this.$utils.isNotEmpty(item.seal_position)) {
                        item.sealPosition = JSON.parse(item.seal_position);
                    }
                    item.isSign = _this.$utils.isNotEmpty(item.sign_file_sid);
                    item.isSeal = _this.$utils.isNotEmpty(item.seal_file_sid);
                    item.areaObj = JSON.parse(item.note_info);
                    totalHeight = _this.$utils.accAdd(totalHeight, item.areaObj.areaH);
                    item.default_text = item.content_text;
                    item.default_edit = item.content_edit;
                    if (item.items && item.items.length > 0) {
                        let items = [];
                        item.items.forEach(child => {
                            let obj = $.extend({}, child);
                            if (_this.$utils.isNotEmpty(child.sign_position)) {
                                obj.signPosition = JSON.parse(child.sign_position);
                            }
                            if (_this.$utils.isNotEmpty(child.seal_position)) {
                                obj.sealPosition = JSON.parse(child.seal_position);
                            }
                            obj.isSign = _this.$utils.isNotEmpty(child.sign_file_sid);
                            obj.isSeal = _this.$utils.isNotEmpty(child.seal_file_sid);
                            obj.areaObj = JSON.parse(child.note_info);
                            obj.default_text = child.content_text;
                            obj.default_edit = child.content_edit;
                            items.push(obj);
                        });
                        item.items = items;
                    }
                });
                let totalRate = 0;
                itemList.forEach((item, index) => {
                    let object = $.extend({}, item, {
                        _index: index,
                        isLast: index === itemList.length - 1,
                    });
                    let height = _this.accRate(item.areaObj.areaH, totalHeight);
                    if (object.isLast) {
                        height = _this.$utils.accSubtr(100, totalRate);
                    }
                    object.style = {
                        height: height + '%',
                    };
                    object.heightRate = _this.$utils.accDiv(Number(height), 100);
                    totalRate = _this.$utils.accAdd(totalRate, height);
                    object.components = _this.getItemComponent(object);
                    let itemH = itemHeight * object.heightRate;
                    if (item.isSign) {
                        let sign_url = _this.fileApiUrl.getFile+_this.$utils.getAccountSetSidEndWithSlash() + item.sign_file_sid;
                        object.signStyle = $.extend({}, item.signPosition, {
                            backgroundImage: `url(${sign_url})`,
                            left: `${item.signPosition.x * (itemWidth / item.signPosition.areaW)}px`,
                            top: `${item.signPosition.y * (itemH / item.signPosition.areaH)}px`,
                            width: `${item.signPosition.imgW * (itemWidth / item.signPosition.areaW)}px`,
                            height: `${item.signPosition.imgH * (itemH / item.signPosition.areaH)}px`,
                        });
                        object.signDrag = {
                            width: itemWidth,
                            height: itemH,
                        };
                    }
                    if (item.isSeal) {
                        let seal_url = _this.fileApiUrl.getFile+_this.$utils.getAccountSetSidEndWithSlash() + item.seal_file_sid;
                        object.sealStyle = $.extend({}, item.sealPosition, {
                            backgroundImage: `url(${seal_url})`,
                            left: `${item.sealPosition.x * (itemWidth / item.sealPosition.areaW)}px`,
                            top: `${item.sealPosition.y * (itemH / item.sealPosition.areaH)}px`,
                            width: `${item.sealPosition.imgW * (itemWidth / item.sealPosition.areaW)}px`,
                            height: `${item.sealPosition.imgH * (itemH / item.sealPosition.areaH)}px`,
                        });
                        object.sealDrag = {
                            width: itemWidth,
                            height: itemH,
                        };
                    }
                    if (item.items && item.items.length > 0) {
                        let items = [];
                        item.items.forEach((cItem, cIndex) => {
                            let obj = $.extend({}, cItem, {
                                _index: cIndex,
                                isLast: cIndex === item.items.length - 1,
                            });
                            obj.components = _this.getColComponent(obj, object);
                            if (_this.edit) {
                                obj.date = _this.$utils.formatDate(cItem.date, 'yyyy-MM-dd');
                            } else {
                                obj.date = _this.$utils.formatDate(cItem.date, 'yyyy年MM月dd日');
                            }
                            let colWidth = _this.$utils.accDiv(itemWidth, object.col);
                            if (cItem.isSign) {
                                let sign_url = _this.fileApiUrl.getFile+_this.$utils.getAccountSetSidEndWithSlash() + cItem.sign_file_sid;
                                obj.signStyle = $.extend({}, cItem.signPosition, {
                                    backgroundImage: `url(${sign_url})`,
                                    left: `${cItem.signPosition.x * (colWidth / cItem.signPosition.areaW)}px`,
                                    top: `${cItem.signPosition.y * (itemH / cItem.signPosition.areaH)}px`,
                                    width: `${cItem.signPosition.imgW * (colWidth / cItem.signPosition.areaW)}px`,
                                    height: `${cItem.signPosition.imgH * (itemH / cItem.signPosition.areaH)}px`,
                                });
                                obj.signDrag = {
                                    width: colWidth,
                                    height: itemH,
                                };
                            }
                            if (cItem.isSeal) {
                                let seal_url = _this.fileApiUrl.getFile+_this.$utils.getAccountSetSidEndWithSlash() + cItem.seal_file_sid;
                                obj.sealStyle = $.extend({}, cItem.sealPosition, {
                                    backgroundImage: `url(${seal_url})`,
                                    left: `${cItem.sealPosition.x * (colWidth / cItem.sealPosition.areaW)}px`,
                                    top: `${cItem.sealPosition.y * (itemH / cItem.sealPosition.areaH)}px`,
                                    width: `${cItem.sealPosition.imgW * (colWidth / cItem.sealPosition.areaW)}px`,
                                    height: `${cItem.sealPosition.imgH * (itemH / cItem.sealPosition.areaH)}px`,
                                });
                                obj.sealDrag = {
                                    width: colWidth,
                                    height: itemH,
                                };
                            }
                            items.push(obj);
                        });
                        object.items = items;
                    }
                    list.push(object);
                });
                _this.signItems = list;
            },
            initItems () {
                let _this = this;
                let itemList = [];
                _this.items.forEach(item => {
                    itemList.push($.extend({}, item));
                });
                _this.signItems = itemList;
                let totalHeight = 0;
                _this.signItems.forEach(item => {
                    totalHeight = _this.$utils.accAdd(totalHeight, item.height);
                });
                let totalRate = 0;
                _this.signItems.forEach((item, index) => {
                    item._index = index;
                    item.isLast = index === _this.signItems.length - 1;
                    let height = _this.accRate(item.height, totalHeight);
                    if (item.isLast) {
                        height = _this.$utils.accSubtr(100, totalRate);
                    }
                    item.style = {
                        height: height + '%',
                    };
                    item.heightRate = _this.$utils.accDiv(Number(height), 100);
                    totalRate = _this.$utils.accAdd(totalRate, height);
                    item.components = _this.getItemComponent(item);
                    item.isSign = false;
                    item.isSeal = false;
                    if (_this.edit) {
                        item.date = _this.$utils.formatDate(new Date, 'yyyy-MM-dd');
                    } else {
                        item.date = _this.$utils.formatDate(new Date, 'yyyy年MM月dd日');
                    }
                    if (item.items && item.items.length > 0) {
                        let items = [];
                        item.items.forEach((cItem, cIndex) => {
                            let obj = $.extend({}, cItem, {
                                _index: cIndex,
                                isLast: cIndex === item.items.length - 1,
                            });
                            obj.components = _this.getColComponent(obj, item);
                            obj.isSign = false;
                            obj.isSeal = false;
                            if (_this.edit) {
                                obj.date = _this.$utils.formatDate(new Date, 'yyyy-MM-dd');
                            } else {
                                obj.date = _this.$utils.formatDate(new Date, 'yyyy年MM月dd日');
                            }
                            items.push(obj);
                        });
                        item.items = items;
                    }
                });
            },
            getColComponent (data, item) {
                let _this = this;
                let list = [];
                let topIndex = 0, bottomIndex = 0;
                if (_this.$utils.isNotEmpty(data.title) || (_this.edit && data.title_edit === 1)) {
                    let obj = _this.getColComponentData(item, data.id + '@col@left_text', 'title', 'left_text',
                        data.title, item.heightRate, _this.topList[topIndex], 10, true);
                    obj.input_edit = _this.edit ? item.title_edit : 0;
                    obj.title = item.title;
                    list.push(obj);
                    topIndex += 1;
                }
                if (_this.$utils.isNotEmpty(data.default_text) || (_this.edit && data.default_edit === 1)) {
                    let obj = _this.getColComponentData(item, data.id + '@col@default_text', 'default_text', 'default_text',
                        data.default_text, item.heightRate, _this.topList[topIndex] + (data.default_edit === 1 ? 10 : 0), 10, true);
                    obj.input_edit = _this.edit ? item.default_edit : 0;
                    obj.default_text = item.default_text;
                    if (obj.input_edit === 1) {
                        obj.class += ' edit_area';
                    }
                    list.push(obj);
                    topIndex += 1;
                }
                if (_this.$utils.isNotEmpty(data.date_label)) {
                    list.push(_this.getColComponentData(item, data.id + '@col@date_label', 'date_label', 'sign_date_label',
                        data.date_label, item.heightRate, _this.bottomList[bottomIndex], 30, false));
                    bottomIndex += 1;
                }
                if (_this.$utils.isNotEmpty(data.sign_label)) {
                    list.push(_this.getColComponentData(item, data.id + '@col@sign_label', 'sign_label', 'sign_date_label',
                        data.sign_label, item.heightRate, _this.bottomList[bottomIndex], 30, false, false));
                    bottomIndex += 1;
                }
                if (_this.$utils.isNotEmpty(data.seal_label)) {
                    list.push(_this.getColComponentData(item, data.id + '@col@seal_label', 'seal_label', 'sign_date_label',
                        data.seal_label, item.heightRate, _this.bottomList[bottomIndex], 30, false, false));
                    bottomIndex += 1;
                }
                return list;
            },
            getColComponentData (item, dataId, type, className, label, heightRate, top, left, isTop, input) {
                let _this = this;
                let width = $('.sign_item_content').width();
                let height = $('.sign_item_content').height();
                width = _this.$utils.accDiv(width, item.col);
                let componentHeight = _this.$utils.accMul(height, heightRate);
                let topRate = _this.accRate(top, componentHeight);
                let leftRate = _this.accRate(left, width);
                return {
                    index: dataId,
                    type: type,
                    drag: {
                        width,
                        height: componentHeight,
                    },
                    input: input === undefined ? true : input,
                    date: type === 'date_label',
                    class: className,
                    label: label,
                    style: isTop ? {
                        top: `${topRate}%`,
                        left: `${leftRate}%`,
                    } : {
                        bottom: `${topRate}%`,
                        right: `${leftRate}%`,
                    },
                };
            },
            getItemComponent (item) {
                let _this = this;
                let list = [];
                let topIndex = 0, bottomIndex = 0;
                if (_this.$utils.isNotEmpty(item.title) || (_this.edit && item.title_edit === 1)) {
                    let obj = _this.getComponentData(item.id + '@left_text', 'title', 'left_text',
                        item.title, item.heightRate, _this.topList[topIndex], 10, true);
                    obj.input_edit = _this.edit ? item.title_edit : 0;
                    obj.title = item.title;
                    list.push(obj);
                    topIndex += 1;
                }
                if (_this.$utils.isNotEmpty(item.default_text) || (_this.edit && item.default_edit === 1)) {
                    let obj = _this.getComponentData(item.id + '@default_text', 'default_text', 'default_text',
                        item.default_text, item.heightRate, _this.topList[topIndex] + (item.default_edit === 1 ? 10 : 0), 10, true);
                    obj.input_edit = _this.edit ? item.default_edit : 0;
                    obj.default_text = item.default_text;
                    if (obj.input_edit === 1) {
                        obj.class += ' edit_area';
                    }
                    list.push(obj);
                    topIndex += 1;
                }
                if (_this.$utils.isNotEmpty(item.date_label)) {
                    list.push(_this.getComponentData(item.id + '@date_label', 'date_label', 'sign_date_label',
                        item.date_label, item.heightRate, _this.bottomList[bottomIndex], 30, false));
                    bottomIndex += 1;
                }
                if (_this.$utils.isNotEmpty(item.sign_label)) {
                    list.push(_this.getComponentData(item.id + '@sign_label', 'sign_label', 'sign_date_label',
                        item.sign_label, item.heightRate, _this.bottomList[bottomIndex], 30, false, false));
                    bottomIndex += 1;
                }
                if (_this.$utils.isNotEmpty(item.seal_label)) {
                    list.push(_this.getComponentData(item.id + '@seal_label', 'seal_label', 'sign_date_label',
                        item.seal_label, item.heightRate, _this.bottomList[bottomIndex], 30, false, false));
                    bottomIndex += 1;
                }
                return list;
            },
            getComponentData (dataId, type, className, label, heightRate, top, left, isTop, input) {
                let _this = this;
                let width = $('.sign_item_content').width();
                let height = $('.sign_item_content').height();
                let componentHeight = _this.$utils.accMul(height, heightRate);
                let topRate = _this.accRate(top, componentHeight);
                let leftRate = _this.accRate(left, width);
                return {
                    index: dataId,
                    type: type,
                    drag: {
                        width,
                        height: componentHeight,
                    },
                    input: input === undefined ? true : input,
                    input_edit: 0,
                    maxRow: 4,
                    date: type === 'date_label',
                    class: className,
                    label: label,
                    style: isTop ? {
                        top: `${topRate}%`,
                        left: `${leftRate}%`,
                        right: type === 'default_text' ? `${leftRate}%` : 'initial',
                    } : {
                        bottom: `${topRate}%`,
                        right: `${leftRate}%`,
                    },
                };
            },
            handleClickAddSign (data, item) {
                if (!this.$utils.isNotEmpty(this.userInfo.signUrl)) {
                    return;
                }
                let object = $.extend({}, data);
                object.isSign = true;
                object.sign_url = this.fileApiUrl.getFile+this.$utils.getAccountSetSidEndWithSlash() + this.userInfo.signUrl;
                object.signStyle = {
                    width: `${this.imageObj.width}px`,
                    height: `${this.imageObj.height}px`,
                    zIndex: this.zIndex,
                };
                data.components.forEach(cData => {
                    if (cData.type === 'sign_label') {
                        object.signStyle = $.extend({}, object.signStyle, cData.style, {
                            backgroundImage: `url(${object.sign_url})`
                        });
                        object.signDrag = cData.drag;
                    }
                });
                this.zIndex = this.zIndex + 1;
                if (!item) {
                    this.$set(this.signItems, data._index, object);
                } else {
                    let obj = $.extend({}, item);
                    let items = [];
                    obj.items.forEach(cItem => {
                        if (data._index === cItem._index) {
                            items.push(object);
                        } else {
                            items.push($.extend({}, cItem));
                        }
                    });
                    obj.items = items;
                    this.$set(this.signItems, item._index, obj);
                }
            },
            handleClickAddSeal (data, item) {
                if (!this.$utils.isNotEmpty(this.userInfo.sealUrl)) {
                    return;
                }
                let object = $.extend({}, data);
                object.isSeal = true;
                object.seal_url = this.fileApiUrl.getFile+this.$utils.getAccountSetSidEndWithSlash() + this.userInfo.sealUrl;
                object.sealStyle = {
                    width: `${this.imageObj.width}px`,
                    height: `${this.imageObj.height}px`,
                    zIndex: this.zIndex,
                };
                data.components.forEach(data => {
                    if (data.type === 'seal_label') {
                        object.sealStyle = $.extend({}, object.sealStyle, data.style, {
                            backgroundImage: `url(${object.seal_url})`
                        });
                        object.sealDrag = data.drag;
                    }
                });
                this.zIndex = this.zIndex + 1;
                if (!item) {
                    this.$set(this.signItems, data._index, object);
                } else {
                    let obj = $.extend({}, item);
                    let items = [];
                    obj.items.forEach(cItem => {
                        if (data._index === cItem._index) {
                            items.push(object);
                        } else {
                            items.push($.extend({}, cItem));
                        }
                    });
                    obj.items = items;
                    this.$set(this.signItems, item._index, obj);
                }
            },
            getItemData(item, isCol) {
                let _this = this;
                let components = item.components;
                let titleFilter = components.filter(item => item.type === 'title');
                let defaultTextFilter = components.filter(item => item.type === 'default_text');
                let sealLabelFilter = components.filter(item => item.type === 'seal_label');
                let signLabelFilter = components.filter(item => item.type === 'sign_label');
                let dateLabelFilter = components.filter(item => item.type === 'date_label');
                let content_text = '', title = '';
                if (item.title_edit === 0) {
                    title = item.title;
                } else {
                    if (isCol) {
                        if (titleFilter[0].input_edit === 0) {
                            title = titleFilter[0].label;
                        } else {
                            title = titleFilter[0][titleFilter[0].type];
                            if (title === undefined) {
                                title = titleFilter[0].label;
                            }
                        }
                    } else {
                        title = item.title;
                    }
                }
                if (item.default_edit === 0) {
                    content_text = item.default_text;
                } else {
                    if (isCol) {
                        if (defaultTextFilter[0].input_edit === 0) {
                            content_text = defaultTextFilter[0].label;
                        } else {
                            content_text = defaultTextFilter[0][defaultTextFilter[0].type];
                            if (content_text === undefined) {
                                content_text = defaultTextFilter[0].label;
                            }
                        }
                    } else {
                        content_text = item.default_text;
                    }
                }
                return {
                    id: _this.work ? item.id : undefined,
                    setting_sid: item.setting_sid,
                    title: title,
                    title_edit: item.title_edit,
                    sn: item.sn,
                    content_text: content_text,
                    content_edit: item.default_edit,
                    seal_label: sealLabelFilter.length > 0 ? sealLabelFilter[0].label : '',
                    sign_label: signLabelFilter.length > 0 ? signLabelFilter[0].label : '',
                    date_label: dateLabelFilter.length > 0 ? dateLabelFilter[0].label : '',
                    date: item.date,
                    col: item.col,
                };
            },
            getDragData(itemData, item) {
                let object = $.extend({}, itemData);
                let signObject = {};
                let signDrawItem = $(item).find('.sign_draw_image');
                if (signDrawItem && signDrawItem.length > 0) {
                    signObject = $.extend({}, signObject, {
                        x: $(signDrawItem).position().left,
                        y: $(signDrawItem).position().top,
                        imgW: $(signDrawItem).width(),
                        imgH: $(signDrawItem).height(),
                        areaW: $(item).width(),
                        areaH: $(item).height(),
                        zIndex: Number($(signDrawItem).css('z-index')),
                    });
                    object = $.extend({}, object, {
                        sign_user_sid: this.userInfo.sid,
                        sign_file_sid: this.userInfo.signUrl,
                        sign_position: JSON.stringify(signObject),
                        noteInfo: JSON.stringify({
                            areaW: $(item).width(),
                            areaH: $(item).height(),
                        }),
                    });
                }

                let sealObject = {};
                let sealDrawItem = $(item).find('.seal_draw_image');
                if (sealDrawItem && sealDrawItem.length > 0) {
                    sealObject = $.extend({}, sealObject, {
                        x: $(sealDrawItem).position().left,
                        y: $(sealDrawItem).position().top,
                        imgW: $(sealDrawItem).width(),
                        imgH: $(sealDrawItem).height(),
                        areaW: $(item).width(),
                        areaH: $(item).height(),
                        zIndex: Number($(sealDrawItem).css('z-index')),
                    })
                    object = $.extend({}, object, {
                        seal_group_sid: this.userInfo.groupSid,
                        seal_file_sid: this.userInfo.seal_sid,
                        seal_position: JSON.stringify(sealObject),
                    });
                }
                object = $.extend({}, object, {
                    note_info: JSON.stringify({
                        areaW: $(item).width(),
                        areaH: $(item).height(),
                    }),
                });
                return object;
            },
            getSignItemData () {
                let _this = this;
                let list = _this.signItems.map(item => {
                    if (item.items && item.items.length > 0) {
                        return {
                            items: item.items.map(child => {
                               return  _this.getItemData(child, true);
                            }),
                        };
                    } else {
                        return _this.getItemData(item);
                    }
                });
                $('.sign_item_content').find('.item_area').each((key, item) => {
                    let index = $(item).attr('index');
                    if (index !== undefined) {
                        let itemData = $.extend({}, list[Number(index)], {
                            note_info: JSON.stringify({
                                areaW: $(item).width(),
                                areaH: $(item).height(),
                            }),
                        });
                        let colComponents = $(item).find('.col_component');
                        if (colComponents && colComponents.length > 0) {
                            let items = [];
                            colComponents.each((ck, cItem) => {
                                let data = _this.getDragData(itemData.items[ck], cItem);
                                if (ck === 0) {
                                    itemData = $.extend({}, itemData, data);
                                } else {
                                    items.push(data);
                                }
                            });
                            itemData.items = items;
                        } else {
                            itemData = _this.getDragData(itemData, item);
                        }
                        _this.$set(list, Number(index), itemData);
                        _this.$forceUpdate();
                    }
                });
                console.log(list);
                return list;
            },
        },
    }
</script>

<style lang="less" rel="stylesheet.less" scoped>
    .sign_item_content {
        height: 100%;
        border: 1px solid #666;
        font-size: 16px;

        /deep/.draw_image {
            width: 200px;
            position: absolute;
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
            user-select: none;
        }

        /deep/.btn_area {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        /deep/.left_text {
            user-select: none;
            cursor: pointer;
            height: 20px;
            line-height: 20px;
        }

        /deep/.default_text {
            user-select: none;
            cursor: pointer;
            height: 20px;
            line-height: 20px;
            text-indent: 2em;

            &.edit_area {
                width: calc(100% - 4em);
            }

            /*&:active {*/
            /*    background-color: #ccc;*/
            /*}*/
        }

        /deep/.sign_date_label {
            user-select: none;
            cursor: pointer;
            height: 32px;
            line-height: 32px;

            span {
                display: inline-block;
                vertical-align: bottom;
            }

            .input_area {
                border: none;
                border-bottom: 1px solid #666;
                width: 160px;
                height: 32px;
                display: inline-block;
                vertical-align: bottom;
                text-align: center;
            }

            .block_area {
                border: none;
                width: 160px;
                height: 20px;
                display: inline-block;
                vertical-align: bottom;
            }
        }

        .item_area {
            width: 100%;
            border-bottom: 1px solid #666;
            position: relative;
            display: flex;

            .col_component {
                position: relative;
                flex: 1;
                border-right: 1px solid #666;

                .item_component {
                    position: absolute;
                }

                &:last-child {
                    border-right: none;
                }
            }

            .item_component {
                position: absolute;
            }

            &:last-child {
                border: none;
            }
        }
    }
</style>
